<template>
<div class="bg">
  <div class="dpImdex">
    <div class="centerBg">
      <img src="@/assets/dpIndex.png" alt="" class="centerBgImg">
      <div class="centerRelative">
        <div class="p-item" @click="toWenZhang(4)">
          <img src="@/assets/全省.png" alt="">
          <div class="text">全省集群概况</div>
        </div>
        <!-- <div class="p-item"  @click="toWenZhang(7.1)">
          <img src="@/assets/政策.png" alt="">
          <div class="text">集群政策</div>
        </div> -->
        <div class="p-item" @click="toWenZhang(11)">
          <img src="@/assets/全市.png" alt="">
          <div class="text">全市集群概况</div>
        </div>
        <!-- <div class="fixed1" @click="toWenZhang(4)">
          <img src="@/assets/zhong.png" alt="">
          <div class="text">全省集群概况</div>
        </div> -->
        <!-- <div class="fixed2" @click="toWenZhang(5)">
          <img src="@/assets/zhong.png" alt="">
          <div class="text">全市集群概况</div>
        </div> -->
        <!-- <div class="fixed3" @click="toWenZhang(6)">
          <img src="@/assets/chang.png" alt="">
          <div class="text">省级以上中小企业特色产业集群</div>
        </div> -->
        <!-- <div class="fixed4" @click="toWenZhang(9)">
          <img src="@/assets/zhong.png" alt="">
          <div class="text">全市产业集群</div>
        </div> -->
        <!-- <div class="fixed5" @click="toWenZhang(8)">
          <img src="@/assets/zhong.png" alt="">
          <div class="text">全省产业集群</div>
        </div> -->
        <!-- <div class="fixed6" @click="toWenZhang(7.1)">
          <img src="@/assets/duan.png" alt="">
          <div class="text">集群政策</div>
        </div> -->
         <!-- <div class="fixed7" @click="toWenZhang(10)">
          <img src="@/assets/duan.png" alt="">
          <div class="text">领跑者企业</div>
        </div> -->
         <!-- <div class="fixed8" @click="toWenZhang(11)">
          <img src="@/assets/duan.png" alt="">
          <div class="text">全市集群概况</div>
        </div> -->

      </div>
     
    </div>
    <!-- 顶部 -->
    <!-- <div class="dpTopIndex">廊坊市特色产业集群管理平台</div>
    <div style="margin-top:36px;display:flex;justify-content: space-between;padding:0 60px;box-size:border-box">
      <div class="homeLeft">
        <div class="item" @click="toWenZhang(4)">全省集群概况</div>
        <div class="item" @click="toWenZhang(5)">全市集群概况</div>
        <div class="item" @click="toWenZhang(6)">省以下中小企业特色产业集群</div>
        <div class="item" @click="toWenZhang(7.1)">集群政策</div>
      </div>
      <div class="homeRight">
        <div class="item" @click="toWenZhang(8)">全省产业集群</div>
        <div class="item" @click="toWenZhang(9)">全市产业集群</div>
        <div class="item" @click="toWenZhang(10)">领跑企业</div>
        <div class="item" @click="toWenZhang(11)">动态管理</div>
      </div>
    </div> -->

  </div>
</div>
  
</template>
<script>
  import moment from 'moment'
  import { mapActions, mapGetters,mapState } from 'vuex'
  import { getAction } from '@/api/manage'
  export default {
    data () {
      return {
        url:{
          queryIndClusterStatistics:'indust/indCluster/queryIndClusterStatistics',
        }
      }
    },
    created () {
      
    },
    beforeDestroy() {
    },
    methods:{
      moment,
      ...mapActions(["Logout"]),
      toWenZhang(type){
        if(type==11){
          this.$router.push('./index')
        } else {
          this.$router.push({
            path: './wenZhang',
            query:{
              type
            }
          })

        }
      }
    },
  }
</script>
<style lang="less" scoped>
.bg{
  width:100vw;
  height: 100vh;
}
.dpImdex{
  background:url('../../assets//newBg.png') center no-repeat;
  background-size: cover;
  overflow: hidden;
  // width:1920px;
  // height: 1080px;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top:0%;
  left:0%;
  // transform: translate(-50%,-50%);
  overflow-y:scroll ;
  .dpTopIndex{
    height: 57px;
    background:url('../../assets/img/u7 (1).png') center no-repeat;
    text-align: center;
    font-family:'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
    font-weight:700;
    font-style:normal;
    color:#FFFFFF;
    font-size: 30px;
    line-height: 76px;
    position: relative;
    text-indent: -35px;
    &::after{
      content: '';
      width: 593px;
      height: 29px;
      position: absolute;
      bottom:-6px;
      left:50%;
      transform: translateX(-53%);
      background:url('../../assets/img/u8 (1).png') center no-repeat;
    }
  }
  .centerBg{  
    width: 100%;
    height: 100%;
    margin:0 auto;
    position: relative;
    .centerBgImg{
      width:100%;
      height: 100%;
    }
  }
  .centerRelative{
    position: absolute;
    height: 624px;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    display: flex;
    gap:18px;
    // width: 67.81%;
    // top:165px;
    // left:50%;
    // transform: translateX(-50%);
    // cursor: pointer;
  }
  .p-item{
    width: 469px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap:30px;
    background: url('../../assets/moRen.png') center no-repeat;
    background-size: cover;
    transition: all 0.2s;
    cursor: pointer;
    font-family: MicrosoftYaHeiUI, MicrosoftYaHeiUI;
    font-weight: bold;
    font-size: 36px;
    color: #FFFFFF;
    text-shadow: 2px 0px 18px #04283F;
    text-stroke: 4px #0E4E95;
    text-align: center;
    justify-content: center;
    &:hover{
      background: url('../../assets/xunZhone.png') center no-repeat;
    }
    img{
      width: 220px;
      height: auto;
      margin:0 auto;
    }
  }
  .fixed1{
    position: absolute;
    left:0;
    top:305px;
  }
  .fixed2{
    position: absolute;
    left:48%;
    transform: translateX(-50%);
    top:0;
  }
  .fixed3{
    position: absolute;
    left:0;
    top:392px;
    z-index:2;
  }
  .fixed4{
    position: absolute;
    left:161px;
    top:254px;
  }
  .fixed5{
    position: absolute;
    left:48%;
    top:139px;
    transform: translateX(calc(-50% + 173px));
  }
  .fixed6{
    position: absolute;
    left:48%;
    transform: translateX(-50%);
    top:305px;
  }
  .fixed7{
    position: absolute;
    right:0;
    top:67px;
  }
  .fixed8{
    position: absolute;
    right:0;
    top:287px;
  }
  // .text{
  //   position: absolute;
  //   top:40px;
  //   right:53px;
  //   font-weight: bold;
  //   font-size: 24px;
  //   color: #FFFFFF;
  //   text-shadow: 3px 0px 3px #000000;
  // }

  .homeLeft, .homeRight{
    height: 100%;
    display: flex;
    flex-direction: column;
    gap:50px
    
  }
  .item{
    width:300px;
    height: 120px;
    padding:20px;
    border:1px solid #000;
    animation: change 3s linear infinite;
    color: #fff;
    cursor: pointer;
    font-size: 30px;
    font-weight: 500;
    background:url('../../assets/img/item2.gif') center no-repeat;
    background-size:cover ;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    text-align: center;
    line-height: 1;
    border-radius: 50px;
  }
}

@keyframes change {
 0% {
    transform: translateY(0);
  }
  50%{
   transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}
</style>
